/**
 * @description 404 页面
 * @author ruan
 * @date 2019年12月4日10:51:22
 */
import { Typography } from 'antd';
import Modal from 'drag-modal';
import React, { Component, Fragment } from 'react';
// @ts-ignore
import notFoundImg2 from '../../assets/images/404-2.gif';
// @ts-ignore
import notFoundImg from '../../assets/images/404.gif';
// @ts-ignore
import notFoundPageStyles from './404v2.less';

const { Paragraph } = Typography;

class NoFoundPageV2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ImgVisible: false,
    };
  }

  public render() {
    // eslint-disable-next-line no-restricted-globals
    const url = `${location.protocol}//${location.host}${location.pathname}`;
    // @ts-ignore
    const { ImgVisible } = this.state;

    return (
      <Fragment>
        <div className={notFoundPageStyles.container}>
          <div className={notFoundPageStyles.leftRight}>
            <div>
              <h1 style={{ fontSize: 40, fontWeight: 700, color: '#484848' }}>Oops!</h1>
            </div>
            <div>
              <h2 style={{ fontWeight: 'bold' }}>你访问的页面找不到了！</h2>
            </div>
            <div>
              <h5 style={{ fontWeight: 'bold' }}>你可以：</h5>
              <Paragraph>
                <ul>
                  <li>
                    <a href={url}>回首页</a>
                  </li>
                  <li>
                    <a
                      onClick={event1 => {
                        this.setState({ ImgVisible: true });
                      }}
                    >
                      点我看图
                    </a>
                  </li>
                </ul>
              </Paragraph>
            </div>
          </div>
          <div className={`${notFoundPageStyles.leftRight}`}>
            <img alt="404 not found" src={`${notFoundImg}?_${new Date().getTime()}`} />
          </div>
        </div>
        <Modal
          title="随便看"
          visible={ImgVisible}
          footer={null}
          width={650}
          onCancel={() => {
            this.setState({ ImgVisible: false });
          }}
        >
          <img width="100%" alt="404 not found" src={`${notFoundImg2}?_${new Date().getTime()}`} />
        </Modal>
      </Fragment>
    );
  }
}

export default NoFoundPageV2;
